<template>
  <div class="box">
    <div class="header">
      <van-nav-bar @click-left="$router.push('/home')">
        <template #left>
          <van-icon name="arrow-left" size="30" color="black" />
        </template>
      </van-nav-bar>
      <div class="headerOne">
        <van-search
          v-model="keyword"
          show-action
          placeholder="请输入搜索关键词"
          @click="fn"
          shape="round"
        >
          <template #action>
            <div @click="fn" background-color="#FF0000">搜索</div>
          </template>
        </van-search>
      </div>
    </div>
    <div class="main">
      <van-card
        num="1"
        :price="item.originprice"
        :desc="item.desc"
        :title="item.brand"
        :thumb="item.img1"
        v-for="(item, index) in proList"
        :key="index"
      />
      <div class="main">
        热门搜索
        <div class="mainOne" v-for="(item, index) in List" :key="index">
          {{ item.keyword }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { SearchList, HotSearch } from "../api/list";

import Vue from "vue";
import { Search, Card } from "vant";
Vue.use(Card);
Vue.use(Search);
export default {
  data() {
    return {
      keyword: "",
      proList: [],
      List: [],
    };
  },
  methods: {
    fn() {
      SearchList({ keyword: this.keyword }).then((res) => {
        console.log(res);
        this.proList = res.data.data;
        console.log(this.proList);
      });
    },
  },
  created() {
    HotSearch({ keyword: this.keyword }).then((res) => {
      console.log(res);
      this.List = res.data.data;
      // console.log(this.HotSearch);
    });
  },
};
</script>

<style scoped>
.header {
  display: flex;
}
.headerOne {
  width: 90%;
  margin-left: 50px;
}
.main .mainOne {
  width: 100px;
  height: 50px;
  text-align: center;

  background-color: red;
}
</style>>
